<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      table.dataintable {
         margin-top: 15px;
         border-collapse: collapse;
         border: 1px solid #aaa;
         width: 500px;
         text-align: center
      }

      table.dataintable th {
         vertical-align: baseline;
         padding: 5px 15px 5px 6px;
         background-color: #3F3F3F;
         border: 1px solid #3F3F3F;
         text-align: left;
         color: #fff;
         text-align: center
      }

      table.dataintable td {
         vertical-align: text-top;
         padding: 6px 15px 6px 6px;
         border: 1px solid #aaa;
      }

      table.dataintable tr:nth-child(odd) {
         background-color: #F5F5F5;
      }

      table.dataintable tr:nth-child(even) {
         background-color: #fff;
      }

      table span {
         margin: 0 2px
      }
   </style>
   <script src="../lib/vue-2.4.0.js"></script>
</head>

<body>
   <div id="app">
      <div v-if="books.length!=0">
         <table class="dataintable">
            <thead>
               <tr>
                  <th></th>
                  <th>书籍名称</th>
                  <th>出版日期</th>
                  <th>价格</th>
                  <th>购买数量</th>
                  <th>操作</th>
               </tr>
            </thead>
            <tbody>
               <tr v-for="(bookList, index) in books" :key="bookList.id">
                  <td>{{bookList.id}}</td>
                  <td>{{bookList.name}}</td>
                  <td>{{bookList.date}}</td>
                  <td>{{bookList.price|priceFormat}}</td>
                  <!--  不等于1时候，按钮disable=false可以用。 -->
                  <td><button @click="handleSub(bookList.id)" :disabled="bookList.count==1">-</button>
                     <span>{{bookList.count}}</span>
                     <button @click="handleAdd(bookList.id)">+</button>
                  </td>
                  <td><a href="javascript:;" @click.prevent="handleDelete(bookList.id)">删除</a></td>
               </tr>
            </tbody>
         </table>

         <h3>总价:{{totalPrice|priceFormat}}元</h3>

      </div>

      <h3 v-else>购物车为空</h3>
      <!-- js动态控制按钮是否可用dom.disabled=true|false  true按钮禁用成灰色。 fasle按钮正常-->
      <!-- <button class="btn">按钮不可用</button> -->




   </div>

   <script>
      const app = new Vue({
         el: "#app",
         data() {
            return {
               books: [
                  { id: 1, name: '算法导论', date: '2006-9', price: 85.00, count: 1 },
                  { id: 2, name: 'js编程艺术', date: '2006-2', price: 59.00, count: 1 },
                  { id: 3, name: '编程珠玑', date: '2008-10', price: 39.00, count: 1 },
                  { id: 4, name: '代码大全', date: '2006-3', price: 128.00, count: 1 },
               ],

            }
         },
         methods: {
            handleDelete(id) {
               //   通过id删除一行记录
               // 通过id找到对对应元素索引。然后再该数组中删除该对象
               // let idx = this.books.findIndex(element => element.id == id)
               // this.books.splice(idx,1)//删除自身
               // 直接过滤再返回新的数组元素在重新赋值回去。
               this.books = this.books.filter(element => element.id !== id)

            },
            handleAdd(id) {

               // 通过id找到对应元素
               this.books.find(element => element.id == id).count++
            },
            handleSub(id) {
               this.books.find(element => element.id == id).count--

              
            }
         },
         computed: {
            totalPrice() {
               return this.books.reduce((prev, next) => next.price * next.count + prev, 0)
            }
         },
         filters: {
            priceFormat(price) {
               return `￥${price.toFixed(2)}`
            }
         }
      })

   </script>
</body>

</html>